<template>
  <div>
    <!-- 格子间隔 -->
    <div class="grid_da" @click="tolist" :gutter="0">
      <van-grid :column-num="5" class="grid_xiao" icon-size='50' :border="false">
        <van-grid-item
          class="grid"
          v-for="item in list"
          :key="item.name"
          :icon="item.image"
          :text="item.name"
        />
      </van-grid>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          image: "//fes.qyerstatic.com/FjiWdzANqPB2Nm0wtDTvrr8HDrsg?imageslim",
          name: "锦囊"
        },
        {
          image: "//fes.qyerstatic.com/Fgg0Tsbl5u7zvbNnmVhjDJd-3I-_?imageslim",
          name: "行程助手"
        },
        {
          image: "//fes.qyerstatic.com/FoRfPUtUloa5MqNwOv5iIcqQ4rHv?imageslim",
          name: "游记"
        },
        {
          image: "//fes.qyerstatic.com/FkMxtgHBTCKsjaLBZ1B7xHGg08QT?imageslim",
          name: "Biu"
        },
        {
          image: "//fes.qyerstatic.com/FsqBlRsF2hnYNrfR9YhCWQqD2j_P?imageslim",
          name: "问答"
        },
        {
          image: "//fes.qyerstatic.com/Fgh5NStqSlSjuK7vtLSwOXg4RwNz?imageslim",
          name: "目的地"
        },
        {
          image: "//fes.qyerstatic.com/Fvv-TfNa_RKqKW0sTcp2BqwgVJNZ?imageslim",
          name: "酒店"
        },
        {
          image: "//fes.qyerstatic.com/FmZQUj73tzL9QixhyTBUtpxbxBqt?imageslim",
          name: "商城"
        },
        {
          image: "//fes.qyerstatic.com/Ft-_BNtwDwbLCwNbk8a6JKMx_OME?imageslim",
          name: "约伴"
        },
        {
          image: "//fes.qyerstatic.com/Fibzv7V9e1eoPD7XT4C0uC-hZIf7?imageslim",
          name: "专栏"
        }
      ]
    };
  },
  methods: {
    tolist() {
      this.$router.push("list");
    }
  }
};
</script>
<style lang="scss" scoped>
.grid_da {
  height: 4rem;
  padding-top: 0.25rem;
  border: 0;
  .grid_xiao {
    .grid {
      width: 1.12rem;
      background: transparent !important;
      padding: 0.1rem;
      div {
        width: 1.5rem;
        height: 1.84rem;
        background-color: transparent;
        padding: 0;
        img {
          display: inline-block;
          width: 1.3rem;
          height: 1.3rem;
        }
        span {
          width: 100%;
          font-size: 12px;
          margin-top: -7px;
          text-align: center;
          color: rgba(0, 0, 0, 0.8);
          font-weight: 500;
        }
      }
    }
  }
}
</style>